<template>
	<view class="box">
		<view class="wrap">
			<view class="tit">
				我的邀请人
				<view class="main">
					<view class="user">
						<image :src="info.avatar" mode="aspectFill"></image>
						<view class="useritem">
							<view class="name">
								{{info.nickname}}
								<text class="tag2" >{{info.creation_system_name}}</text>
							</view>
							<view class="account">
								账号:{{info.mobile_format}}
							</view>
						</view>
					</view>
					<view class="right">
						<view class="item" @click="changeone">
							<image :src="baseUrl + '/static/icon/wx.png'" mode="aspectFill"></image>
							<text>微信</text>
						</view>
						<view class="item" @click="changeone2" >
							<image :src="baseUrl + '/static/icon/tel.png'" mode="aspectFill"></image>
							<text>电话</text>
						</view>
					</view>
				</view>

			</view>
		</view>
		<u-popup :show="flagwx" mode="center" @close="flagwx=false"  :closeable="true" bgColor="transparent"
			:closeOnClickOverlay="false">
			<view class="popup-content">
				<text class="popup-title h2">他的微信：</text>
				<view class="itemmain2">
					<text>{{info.wechat}}</text>
					<view class="btn" @click="copy1">
						复制
					</view>
				</view>
				<text class="btns" @click="flagwx=true">确定</text>
			</view>
		</u-popup>
		<u-popup :show="flagtel" mode="center" @close="flagtel=false"  :closeable="true" bgColor="transparent"
			:closeOnClickOverlay="false">
			<view class="popup-content">
				<text class="popup-title h2">他的联系电话：</text>
				<view class="itemmain2">
					<text>{{info.mobile}}</text>
					<view class="btn" @click="copy2" >
						复制
					</view>
				</view>
				<text class="btns" @click="flagtel=true">确定</text>
			</view>
		</u-popup>
	</view>
	
</template>

<script>
import {recommend} from "../../api/user.js"
	export default {
		data() {
			return {
				baseUrl: this.$imageBaseUrl,
			flagwx:false,
			flagtel:false,
			info:{}
			}
		},
		onLoad(){
			this.getinfo()
		},
		methods: {
			getinfo(){
				recommend({
					
				}).then(res=>{
					this.info=res.data.parent_user
					
				})
			},
			changeone(){
				if(this.info.wechat){
					this.flagwx=true
				}else{
					uni.$u.toast("对方未设置微信")
				}
			},
			changeone2(){
				if(this.info.mobile){
					this.flagtel=true
				}else{
					uni.$u.toast("对方未设置联系电话")
				}
			},
			copy(){
				uni.setClipboardData({
					data: this.info.wechat,
					success: function() {
						uni.$u.toast('复制成功');
					}
				});
			},
			copy2(){
				uni.setClipboardData({
					data: this.info.mobile,
					success: function() {
						uni.$u.toast('复制成功');
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		width: 750rpx;
		height: 100vh;
	}
	.wrap{
		width: 690rpx;
		height: 200rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		margin: 0 auto;
		margin-top: 30rpx;
	}
	.tit{
		padding-top: 26rpx;
		margin-left: 24rpx;
		font-weight: 400;
		font-size: 30rpx;
		color: #666666;
	}
	.user{
		display: flex;
		margin-top: 24rpx;
		align-items: center;
		>image{
			width: 72rpx;
			height: 72rpx;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			margin-left: 14rpx;
		}
		.useritem{
			display: flex;
			flex-direction: column;
			margin-left: 22rpx;
			.name{
				font-weight: 400;
				font-size: 28rpx;
				color: #333333;
			}
			.account{
				font-weight: 400;
				font-size: 24rpx;
				color: #666666;
				margin-top: 14rpx;
			}
		}
	}
	.tag2{
		font-weight: 400;
		font-size: 24rpx;
		color: #66B250;
		margin-left: 14rpx;
	}
	.main{
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.right{
		display: flex;
		align-items: center;
		margin-right: 50rpx;
		.item{
			margin-left: 24rpx;
			display: flex;
			flex-direction: column;
			margin-top: 20rpx;
			>image{
				width: 46rpx;
				height: 46rpx;
			}
			>text{
				font-weight: 400;
				font-size: 22rpx;
				color: #3D3D3D;
			}
		}
	}
	.popup-content {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 48rpx;
		width: 602rpx;
		height: 406rpx;
		background: #FFFFFF;
		border-radius: 22rpx 22rpx 22rpx 22rpx;
		
	
	}
	.popup-title{
		margin-top: 40rpx;
		font-weight: 700;
		font-size: 32rpx;
		color: #333333;
	}
	.popup-center{
		display: flex;
		align-items: center;
		justify-content: center;
		overflow: auto;
		>image{
			margin-left: 14rpx;
			width: 20rpx;
			height: 20rpx;
		}
	}
	.btns{
		width: 264rpx;
		height: 72rpx;
		background: linear-gradient( 90deg, #FA2222 2%, #FFC400 98%);
		border-radius: 280rpx 280rpx 280rpx 280rpx;
		text-align: center;
		line-height: 72rpx;
		font-weight: 400;
		font-size: 28rpx;
		color: #FFFFFF;
	}
	.itemmain2{
		width: 496rpx;
		height: 64rpx;
		background: #F7F7F7;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
	
		text-align: center;
		line-height: 60rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 0 auto;
		margin-top: 20rpx;
		padding-left: 22rpx;
		>image{
			width: 40rpx;
			height: 40rpx;
		}
		.btn{
			width: 70rpx;
			height: 40rpx;
			background: linear-gradient( 90deg, #FA2222 2%, #FFC400 98%);
			border-radius: 6rpx 6rpx 6rpx 6rpx;
			text-align: center;
			line-height: 40rpx;
			font-weight: 400;
			font-size: 24rpx;
			color: #FFFFFF;
			margin-right: 16rpx;
		}
	}
</style>
